import React, { Component } from 'react'
import '../../sass/mainIndex.sass'
import { TabBar } from 'antd-mobile'
import { Route, Switch } from 'react-router-dom'

// 引入子组件
import MainIndex from '../mainIndex/index'
import Friend from '../friend/index'
import WordOfMouth from '../wordOfMouth/index'
import My from '../my/index'
// 引入图片
import main1 from '../../images/main1.svg'
import main2 from '../../images/main2.svg'
import main3 from '../../images/main3.svg'
import main4 from '../../images/main4.svg'

class main extends Component {
  render() {
    // console.log(this.props)
    return (
      <div className="mainIndex">
        {/* 子路由嵌套容器 */}
        <div className="content">
          {/* react做路由嵌套时，<Switch> 外面不能嵌套一个 <Router>，会导致页面内容不切换 */}
          <Switch>
            {/* 子路由配置 */}
            <Route exact path="/main/mainIndex" component={MainIndex} />
            <Route exact path="/main/friend" component={Friend} />
            <Route exact path="/main/wordOfMouth" component={WordOfMouth} />
            <Route exact path="/main/my" component={My} />
          </Switch>
        </div>

        {/* 底部导航栏 */}
        <TabBar className="tabBar" tabBarPosition="bottom">
          <TabBar.Item
            title="首页"
            icon={
              // <div
              //   style={{
              //     width: '44px',
              //     height: '44px',
              //     background:
              //       'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  44px 44px no-repeat'
              //   }}
              // />
              // 使用图片
              <img
                alt="404"
                src={main1}
                style={{ width: '44px', height: '44px' }}
              />
            }
            onPress={() => {
              console.log(1)
              this.props.history.push(`/main/mainIndex`)
            }}
          />
          <TabBar.Item
            title="口碑"
            icon={
              // <div
              //   style={{
              //     width: '44px',
              //     height: '44px',
              //     background:
              //       'url(https://gw.alipayobjects.com/zos/rmsportal/BTSsmHkPsQSPTktcXyTV.svg) center center /  44px 44px no-repeat'
              //   }}
              // />
              <img
                alt="404"
                src={main2}
                style={{ width: '44px', height: '44px' }}
              />
            }
            onPress={() => {
              console.log(2)
              this.props.history.push(`/main/wordOfMouth`)
            }}
          />
          <TabBar.Item
            title="朋友"
            icon={
              // <div
              //   style={{
              //     width: '44px',
              //     height: '44px',
              //     background:
              //       'url(https://zos.alipayobjects.com/rmsportal/psUFoAMjkCcjqtUCNPxB.svg) center center /  44px 44px no-repeat'
              //   }}
              // />
              <img
                alt="404"
                src={main3}
                style={{ width: '44px', height: '44px' }}
              />
            }
            onPress={() => {
              console.log(3)
              this.props.history.push(`/main/friend`)
            }}
          />
          <TabBar.Item
            title="我的"
            icon={
              // <div
              //   style={{
              //     width: '44px',
              //     height: '44px',
              //     background:
              //       'url(https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg) center center /  44px 44px no-repeat'
              //   }}
              // />
              <img
                alt="404"
                src={main4}
                style={{ width: '44px', height: '44px' }}
              />
            }
            onPress={() => {
              console.log(4)
              this.props.history.push(`/main/my`)
            }}
          />
        </TabBar>
      </div>
    )
  }
}

export default main
